var count = 0
var sliderImgsWrap = document.querySelector('.box .img')
var imgs = document.querySelectorAll('.box .img li')
var canClick = true
var dot = document.querySelectorAll('.dot li')


for (let i = 0; i < dot.length; i++) {
   
    dot[i].onclick = function () {
        if (!canClick) return
        canClick = false
        count = i 
        move(sliderImgsWrap, { left: -770 * count })
        adddot()
    }

}

function adddot(){
    for( let i=0;i<dot.length;i++){
       
        dot[i].className = ''
    }
    if(count<4 && count >=0){
        dot[count].className = 'active'
    }
    else if(count==4){
        dot[0].className = 'active'
        count =0
    }
    if(parseInt(sliderImgsWrap.style.left)==-3080){
            sliderImgsWrap.style.left = '0'
        }
}
let timer = null
function startSlider() {
    timer = setInterval(() => {
        if (!canClick) return
        canClick = false
        count++
        move(sliderImgsWrap, { left: -770 * count })
        adddot()
        
    }, 2000)
}
startSlider()
var box = document.querySelector('.box')
box.addEventListener('mouseover', function () {
    clearInterval(timer)
})
box.addEventListener('mouseout', function () {
    startSlider()
})
